<template>
    <div>

      <el-card class="box-card" v-loading="pddLoading" >
          <div slot="header" class="clearfix">
            <span>获取24小时内的所有拼多多订单</span>
          </div>
          <div class="text item">
              <el-button @click="getPddOrder" type="primary">获取订单</el-button>
          </div>
      </el-card>
      <br>
      <el-card class="box-card"  v-loading="hzwLoading">
          <div slot="header" class="clearfix">
            <span>获取24小时内的所有孩子王订单</span>
          </div>
          <div   class="text item">
              <el-button @click="getHzwOrder"  type="primary">获取订单</el-button>
          </div>
      </el-card>
      <br>
      <el-card class="box-card"  v-loading="exportExcelLoading">
          <div slot="header" class="clearfix">
            <span>导出已完成订单</span>
          </div>
          <div class="text item">
              <el-date-picker
                v-model="date"
                type="daterange"
                @change="condata"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd">
              </el-date-picker>
              <el-button  @click="exportExcel" type="primary">导出</el-button>
          </div>
      </el-card>
      <br>
      <el-card class="box-card" v-loading="getOneLoading">
          <div slot="header" class="clearfix">
            <span>按订单号获取拼多多订单</span>
          </div>
          <div class="text item">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                  <el-form-item label="店铺">
                      <el-select v-model="formInline.id" placeholder="请选择店铺">
                          <el-option v-for="shop in shopList" :key="shop.id" :label="shop.mallName" :value="shop.id"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="订单编号或申报单号">
                    <el-input v-model="formInline.orderNo" placeholder="请输入"></el-input>
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" @click="getOnePdd">获取订单</el-button>
                  </el-form-item>
              </el-form>
          </div>
      </el-card>
      <br>
    </div>
</template>

<script>
  import {getPddOrder,getHzwOrder,getOnePdd,exportExcel,shopList} from '../../api/apis'
  export default {
    data() {
      return {
        date:"",
        shopList:[],
        pddLoading:false,
        hzwLoading:false,
        exportExcelLoading:false,
        getOneLoading:false,
        formInline: {
          id: '',
          orderNo: ''
        },
        aa:{
          a:"",
          b:""
        },
        rules: {
          id: [
            { required: true, message: '请选择店铺', trigger: 'blur' }
          ],
          orderNo: [
            { required: true, message: '请输入订单编号', trigger: 'blur' },
            { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      getPddOrder(){
          this.pddLoading = true;
          getPddOrder().then((res)=>{
              if(res.status === 200 ){
                  if(res.data.code == 0){
                      this.$message.success("获取成功")
                  }else{
                      this.$message.error(res.data.msg)
                  }
              }
              this.pddLoading= false;
          });
      },
      getHzwOrder(){
          this.hzwLoading = true;
          getHzwOrder().then((res)=>{
              if(res.status === 200 ){
                  if(res.data.code == 0){
                      this.$message.success("获取成功")
                  }else{
                      this.$message.error(res.data.msg)
                  }
              }
              this.hzwLoading= false;
          });
      },exportExcel(){
          console.log(this.date)
          if(!this.date){
            this.$message.error("请选择时间")
            return false;
          }
          this.exportExcelLoading = true;
          // location.href="/api/system/data/exportExcel?date="+this.date[0]+","+this.date[1];
          let para = {date:this.date[0]+","+this.date[1]}
          exportExcel(para).then((res)=>{
              console.log(res); 
              this.download( res.data);
              this.exportExcelLoading= false;
          });
      },download (data) {
        if (!data) {
            return
        }
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '订单列表.xlsx')

        document.body.appendChild(link)
        link.click()
      },
      condata(value) {
          console.log(value);
      },
      getOnePdd(){
        this.aa.a = "adsad";
        console.log(this.aa);
        if(!this.formInline.id){
          this.$message.error("请选择店铺")
          return false;
        }
        if(!this.formInline.orderNo){
          this.$message.error("清输入订单编号")
          return false;
        }
        this.getOneLoading = true;
        getOnePdd(this.formInline).then((res)=>{
              if(res.status === 200 ){
                  if(res.data.code == 0){
                      this.$message.success("获取成功")
                  }else{
                      this.$message.error(res.data.msg)
                  }
              }
              this.getOneLoading= false;
          });
      },
      getshopList(){
          let that = this;
          let para = {"type":"拼多多"}
          shopList(para)
            .then(function (res) {
              if(res.status === 200 ){
                if(res.data.code == 0){
                  that.shopList = res.data.data;
                }else{
                  that.$message.error(res.data.msg)
                }
              }
          })
          .catch(function (error) {
              console.log(error);
          });
      }
    },
    created: function () {
      this.getshopList();
    } 
}
</script>
 